<template>
  <div class="label-wrapper">
    <div class="label">{{ label }}</div>
    <div class="point"></div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    label: {
      type: String,
      default: '这里是标题',
    },
  },
  data() {
    return {}
  },
})
</script>
<style lang="scss" scoped>
.label-wrapper {
  position: relative;
  line-height: 18px;
  font-size: 18px;

  .label {
    font-weight: bold;
  }

  .point {
    position: absolute;
    left: -15px;
    top: 4px;
    display: block;
    width: 10px;
    height: 10px;
    background-color: #0062ff;
    border-radius: 50%;
    /* border: 50px solid lightpink; */
    &::before {
      content: ' ';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 5px;
      height: 5px;
      background-color: #fff;
      border-radius: 50%;
    }
  }
}
</style>
